import React from "react"

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

import {get_sirenfm,get_music_url} from "../../../../api/index"


// const tabs = [
//   { title: <Badge text={'3'}>First Tab</Badge> },
//   { title: <Badge text={'今日(20)'}>Second Tab</Badge> },
//   { title: <Badge dot>Third Tab</Badge> },
//   { title: <Badge dot>four Tab</Badge> },
// ];

const tabs = [
  { title: "我收藏的电台" },
  { title: "我创建的电台" },
  // { title: "视频" },
  // { title: "专栏" },
  // { title: "Mlog" },
];

class siren_Tabs extends React.Component{
  constructor(){
    super()
    this.state = {
      fm:{},
      fm_arr:[],
      firstPic:"",
      firstName:"",
      firstPlayer:"",
      musicId:0,
      musicUrl:""
    }
  }

  componentDidMount(){
    get_sirenfm()
    .then(body=>body.json())
    .then(res=>{
      
      console.log(res);
        this.setState({
          fm:res,
          fm_arr:res.data,
          firstPic:res.data[0].album.picUrl,
          firstName:res.data[0].name,
          firstPlayer:res.data[0].artists[0].name,
          musicId:res.data[0].id
      })

      get_music_url(res.data[0].id)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          musicUrl:res.data[0].url
      })
      console.log(this.state.musicUrl);
    })

      console.log(this.state.musicId);
    })

    // setTimeout(function(){
			
		// },0);

    


  }
  

  render(){
    return (
      <div>
        <div style={{
          background: 'url('+this.state.firstPic+') no-repeat',
          // height:"600px",
          filter: 'blur(20px) brightness(0.30)',
          // filter: 'brightness(0.30)',
          width:"100%",height:"15rem",
          float:"left"}}>
        </div>
        <div style={{position:"absolute",textAlign:'center',width:"100%"}}>
          <img src={this.state.firstPic} alt="" style={{width:'260px',height:'260px',marginTop:"50px"}}/>
          <h2 style={{textAlign:'center',width:"360px",color:"white"}}>{this.state.firstName}</h2>
          <h3 style={{textAlign:'center',color:"white"}}>{this.state.firstPlayer}</h3>

          
          <audio src={this.state.musicUrl} 
          controls="controls" autoPlay
          style={{display:"block",margin:"80px auto",
          border:"1px solid black",borderRadius:"30px",
          }}>
          </audio>

        </div>
  
  
      </div>
    
    )
  }
}




export default siren_Tabs